<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    /*
        Web性能指标
            RAIL性能模型
                Response
                Animation
                Idel
                Load
            基于用户体验的性能指标
                FCP 首次内容绘制（白屏到第一次看到的内容的时间）(First Contentful Paint)
                LCP 最大内容绘制（最大的内容加载时间）(Largest Contentful Paint)
                FID 首次输入延迟（首次看到交互到实际能交互的时间）()
                TTI 完全达到可交互状态（首次看到页面到可以流畅交互的时间）(Time to interactive)
                TBT 总阻塞时间（从FCP到TTI中长任务累加起来的时间）（超过50ms就是长任务）(Total Blocking Time)
                CLS 累计布局偏移（布局抖动）（点击时突然变成另外一个东西）(Cumulative Layout Shift)
                Speed Index

                白屏时间
                首屏时间

                DCL (DOM Content Load)
                L (All Load)
            Web Vitals
                LCP
                FID
                CLS
        Web性能测试
            Lighthouse
            WebPageTest
            Chrome DevTools
        优化建议
            移除阻塞渲染的资源
            预连接所要请求的资源
            降低服务端响应时间
            适当调整图片大小
            移除未使用的css
            移除未使用的js
            基于文本的资源应该使用压缩（gzip、deflate或brotli）来最小化网络总字节

        面试题
            进程和线程的区别
                1、线程出错，进程崩溃
                2、进程间相互隔离
                3、进程关闭由操作系统回收
                4、线程和线程共享数据
            单进程浏览器
            多进程浏览器
                浏览器主进程
                GPU进程
                插件进程
                网络进程
                渲染进程
                    js引擎线程
                    GUI渲染线程(GUI和js线程是互斥的)
                    事件触发线程
                    定时器触发线程
                    HTTP请求线程
            从输入url到呈现内容，经历了哪些过程
                1、网络请求线程开启
                    解析url
                2、DNS解析
                    浏览器缓存->系统DNS缓存->hosts->本地域名服务器->根域名服务器->com顶级域名服务器->权限域名服务器
                    <<<优化点>>>
                        减少DNS查找
                            增加缓存时间
                            域名控制在2-4内（多个域名是为了突破并发数的限制）
                            dns-prefetch <link ref="dns-prefetch" href="a.com">
                X、网络模型
                    物理层、数据链路层、网络层、传输层、会话层、表示层、应用层（OSI七层模型）
                    数据链路层、       网络层、传输层、应用层（TCP/IP模型）
                    应用层（http、https）
                    传输层（tcp、udp）
                    网络层（ip）
                3、TCP连接
                    三次握手、四次挥手
                4、HTTP请求
                    http1.0
                        短连接（connection: keep-alive开启长连接）
                    http1.1
                        长连接（默认长连接）
                        管道机制（可以同时发出多个请求，但是响应是串行的）
                        Content-Length （用来区分请求）
                        Transfer-Encoding: chunked
                    http2.0
                        SPDY（2009）
                        http/2（2015）
                        多工（多个请求、多个响应，都是并行）
                   缓存
                        强制缓存（缓存不过期，直接用缓存，不发请求）
                            Expires（设置一个过期时间，如：2022-09-27 10:00:00过期，缺点：绝对时间，客户端时间和服务端时间可能不同步）
                            cache-control（相对时间，如：5s过期 max-age=5）
                        协商缓存（每次都请求，问一下服务器是否过期）
                            响应头：last-modified
                            请求头：if-modified-since
                                这样方式有个问题，我把文件名改了，然后有改回去了，文件名内容都没边，但是更新时间变了，重新请求又是200
                            相应头：etag
                            请求头：if-none-match
                                基于文件内容生成一个唯一密码戳
                            有效返回304，浏览器取缓存数据
                            无效返回200，返回新数据
                            no-store 不用缓存
                            no-cache 用协商缓存
                5、反向代理
                6、服务器返回资源
                7、浏览器渲染
                    构建DOM和CSSOM
                    Render Tree
                    布局
                    绘制
    */
</script>
</body>
</html>
